<template>
    <el-dialog title="角色信息" :visible.sync="isShow" @close = "closeDialog">

<el-form :model="roleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline = "true">

<div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; padding: 0 12px;">
<span style="font-size: 16px; font-weight: bold;">角色信息</span>
<div>
  <el-button type="primary" @click="submitForm">确定</el-button>
  <el-button @click="closeDialog">取消</el-button>
</div>
</div>

<br>
<el-form-item label="角色名称" prop="rolename">
    <el-input  v-model="roleForm.rolename" style="width: 205px;"></el-input>
</el-form-item>
<br>
<el-form-item label="角色详情" prop="roleinfo">
    <el-input  v-model="roleForm.roleinfo" style="width: 205px;"></el-input>
</el-form-item>
<br>
<el-form-item label="关联用户" prop="useridList">
    <el-select v-model="roleForm.useridList" multiple placeholder="请选择关联用户" clearable="true" filterable  style="width: 205px;">
        <el-option v-for="user in empList" :label="user.ename" :value="user.userid" :key="user.userid"></el-option>
    </el-select>
</el-form-item>
<br>
<el-form-item label="关联菜单" prop="menuidList">
    <el-select v-model="roleForm.menuidList" multiple placeholder="请选择关联菜单" clearable="true" filterable  style="width: 205px;">
        <el-option v-for="m in menuList" :label="m.menuname" :value="m.menuid" :key="m.menuid"></el-option>
    </el-select>
</el-form-item>

</el-form>
</el-dialog>
</template>

<script>
export default {
    name:'roleShow',
    props:{
        isShow:Boolean,
        proInfo:Object
    },
    data(){
        return{
            roleForm:{
                roleid:0,
                rolename:'',
                roleinfo:'',
                menuidList:[],
                useridList:[]
            },
            empList:[],
            menuList:[],
            //////////////////////////////
            rules: {
            rolename: [
                { required: true, message: '请输入角色名称', trigger: 'blur' }
            ],
            useridList: [
                { required: true, message: '请选择要绑定的用户', trigger: 'blur' }
            ],
            menuidList: [
                { required: true, message: '请选择要绑定的菜单', trigger: 'blur' }
            ] 
      ///////////////////////////////////////
    }
        }
    },
    methods:{
        submitForm(){
          this.$refs['ruleForm'].validate((valid) => {
            //valid代表验证结果
            if (valid) {//true代表校验通过，可以将数据提交给后台
                let url = "/addRole"
                if(this.roleForm.roleid != 0){
                    url = "/updateRole"
                }
                debugger
                this.$http.post(url,this.roleForm).then(res =>{
                    if(res.data === 'success'){
                        this.$emit('supSave',res.data)
                    } else{
                        this.$message.error("服务器错误")
                    }
                })
            } 
        });
        },
        getEmpList(){
            this.$http.post("/getEmpList").then(res =>{
                    this.empList = res.data
            })
        },
        getMenuList(){
            this.$http.post("/getMenuList").then(res =>{
                this.menuList = res.data
            })
        },
        closeDialog(){
            this.roleForm = {
                roleid:0,
                rolename:'',
                roleinfo:'',
                menuidList:[],
                useridList:[]
            }
            //重置数据并关闭弹框
            this.$emit('closeDialog')
            //重置验证信息
            this.$refs['ruleForm'].resetFields();
        },
    },
    watch:{
        isShow(val){
            //val代表父组件传递的新的isShow值
            this.dialogFormVisible = val
            // this.getProType()
        },
          proInfo:{
              handler(val){
                  //将父组件要修改的员工信息赋值给当前表单绑定的empForm对象
                   this.roleForm = {...val}
                   this.getEmpList()
                   this.getMenuList()
              },
          }
    },
    created(){
        this.getEmpList()
        this.getMenuList()
    }
}
</script>

<style>

</style>